
<template>
	<view class="container">
		<view class="top">
			<view class="position" @click="ToCity()"><view class="img"><image src="../../static/position3.png"/></view><view class="city">{{CityName}}</view></view>
			<view class="search"><view class="icon"><image src="/static/search.png" /></view><view class="input"><input type="text" placeholder="搜索用户名称或者ID" @input="InputNickName" confirm-type="search" @confirm="Search"/></view></view>
			<view class="btn" @click="Search()">搜索</view>
		</view>
		<view class="filter"><dropdown v-if="IsFirst==1" themeColor="#ff5732" :dropdownMenu="DropdownMenuList" @confirm="Confirm"></dropdown></view>
		<view class="panel">
			<view class="list" v-for="item in List" @click="Info(item.ID)">
				<view class="headimg">
					<image :src="Tools.GetImg(item.HeadImg,500)" mode="aspectFill"/>
					<view class="identify">
						<view class="icon" v-if="item.IsRealName==1"><image src="https://yuehuiba.qiyedaishu.com/img/shiming.png"/></view>
						<view class="icon" v-if="item.IsSchool==1"><image src="https://yuehuiba.qiyedaishu.com/img/xueli.png"/></view>
						<view class="icon" v-if="item.IsCrime==1"><image src="https://yuehuiba.qiyedaishu.com/img/fanzui.png"/></view>
						<view class="icon" v-if="item.IsMarriage==1"><image src="https://yuehuiba.qiyedaishu.com/img/hunyin.png"/></view>
					</view>
				</view>
				<view class="info"><view class="realname">{{item.NickName}}</view><view class="sex"><image :src="'../../static/'+item.Sex.ToSex()"/></view><view class="age">{{item.Age}}岁</view></view>
				<view class="pos"><view class="city">{{item.WorkPlace}}</view><view class="distance">{{item.Distance}}</view></view>
			</view>
			<view class="nodata" v-if="NoData"></view>
			<view class="loadmore">{{Tip}}</view>
		</view>
	</view>
</template> 

<script>
import dropdown from '@/components/da-dropdown/da-dropdown'
export default {
    components: {
	  dropdown
    },
	onShareAppMessage: function() {
		var UserID = uni.getStorageSync("UserID");
		return {
		  title: this.Sex + "单身",
		  path: "pages/yuehui/yuehuilist?ParentID="+UserID//这是一个路径
		}
	},
	data() {
		return {			
			Tip:'正在加载...',
			Page:1,
			List:[],
			NoData:false,
			LoadMore:true,
			Keyword:'',
			Lat:0,
			Lng:0,
			Plat:0,
			Type:0,
			IsFirst:0,
			CityID:0,	
			CityName:'全国',			
			Filter:{},
			Sex:'',
			DropdownMenuList:[]
		};
	},
	onPullDownRefresh() {
		this.Re_Load();
	},
	onReachBottom() {
		if(this.LoadMore){
			this.Page++;
			this.Find_Pager();
		}
	},
	onShow() {
		uni.$once("SelectCity",CityName=>{
			this.CityName=CityName;				
			this.Re_Load();
		});
	},
	onLoad(options) {
		this.Sex=options.Sex;
		if(uni.getStorageSync("CityName")){
			this.CityName=uni.getStorageSync("CityName");
		}
		uni.setNavigationBarTitle({
			title: this.Sex + "单身"
		});
		uni.getLocation({
		  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
		  success: res=> {
			this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
			this.Find_Pager();
		  },
		  fail: res=>{
			  this.Find_Pager();
		  }
		});
		
	},
	methods:{
		Confirm(v, f) {
		  this.Filter = f;			  
		  this.Re_Load();
		},
		ClickPlat(Plat){				
			this.Plat=Plat;
			this.Re_Load();
		},
		ClickType(Type){
			this.Type=Type;
			this.Re_Load();
		},
		ToCity(){
			this.Util.AddPushCount();
			uni.navigateTo({
				url:'/pages/index/city'
			})
		},
		Info(ID){
			this.Util.AddPushCount();
			uni.navigateTo({
				url:'/pages/yuehui/yuehuiinfo?ID='+ID
			})
		},
		InputNickName(e){
			this.Keyword = e.detail.value;
		},
		Search(){
			this.Util.AddPushCount();
			this.Re_Load();
		},
		Find_Pager(){
			var data = this.Filter;
			data.Act="Find_User";
			data.City=this.CityName;
			data.Lat = this.Lat;
			data.Lng = this.Lng;
			data.Page=this.Page;
			data.Keyword=this.Keyword;
			data.Limit=20;
			data.IsFirst = this.IsFirst;
			data.Sex=this.Sex;
			this.Util.Loading("加载中...");
			this.Util.Post(data, json=>{
				this.Util.HideLoading();
				uni.stopPullDownRefresh();
				this.List= this.List.concat(json.Data.List);
				if(this.IsFirst == 0){
					this.IsFirst = 1;
					this.InitMenu(json.Data);
				}
				if(json.Data.Count==0){
					this.NoData=true;
					this.Tip="没有找到任何用户数据";
				}
				else if(this.List.length>=json.Data.Count){
					this.LoadMore=false;
					this.Tip="我是有底线的";
				}
			});
		},
		Re_Load(){
			this.List=[];
			this.Page=1;
			this.NoData=false;
			this.LoadMore=true;
			this.Tip='正在加载...';
			this.Find_Pager();
		},
		InitMenu(data){
			this.DropdownMenuList.push({title: '年龄',type: 'cell', prop: 'Age',showAll: true,showIcon: true,value: '0', options: data.AgeList.ToLabelValue()});
			this.DropdownMenuList.push({title: '身高',type: 'cell', prop: 'Stature',showAll: true,showIcon: true,value: '0', options: data.StatureList.ToLabelValue()});
			this.DropdownMenuList.push({title: '年薪',type: 'cell', prop: 'Income',showAll: true,showIcon: true,value: '0', options: data.IncomeList.ToSameValue()});
			this.DropdownMenuList.push({title: '职业',type: 'cell', prop: 'WorkRole',showAll: true,showIcon: true,value: '0', options: data.WorkRoleList.ToSameValue()});
			this.DropdownMenuList.push({title: '婚姻状况',type: 'cell', prop: 'Marriage',showAll: true,showIcon: true,value: '0', options: data.MarriageList.ToSameValue()});
		}
		
	}
}
</script>

<style lang="scss">
	.top{width:100%; height:95rpx; display: flex; flex-direction: row; padding-top:15rpx;
		.position{width:auto; height:70rpx; line-height: 70rpx; display: flex; flex-direction: row; padding-left:10rpx;
			.img{width:50rpx; height: 90rpx; padding-top:12rpx; image{width:50rpx; height:50rpx;}}
			.city{width:auto; height:60rpx;}
		}
		.search{flex:1; height:70rpx; margin-left:25rpx; padding-top:10rpx; padding-left:20rpx; float:left; border-radius: 10rpx; background-color:#ffffff; display: flex; flex-direction: row;
			.icon{width:50rpx; height:50rpx; margin-top:0rpx; image{width:100%; height:100%;}}
			.input{flex:1; padding-left:10rpx;}
		}
		.btn{width:90rpx; height:70rpx; line-height: 70rpx; margin-left:15rpx; margin-right: 20rpx; border-radius: 10rpx; text-align: center; background-color: #ff5732; color:#ffffff;}
	}
	.filter{width:750rpx; height:80rpx; float:left;}
	.panel{width:100%; padding:20rpx; padding-top:0rpx; float:left; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
		.list{width:345rpx; height:470rpx; background-color: #ffffff; border-radius: 20rpx; margin-bottom: 20rpx; overflow: hidden;
			.headimg{width:345rpx; height:345rpx; float:left; position: relative; overflow: hidden; image{width:345rpx; height:345rpx;}
				.identify{width:40rpx; height:auto; position:absolute; right:10rpx; bottom:10rpx;display: flex; flex-direction: column;
					.icon{width:40rpx; height:40rpx; margin-top:6rpx; image{width:40rpx; height:40rpx; border-radius: 10rpx;}}
				}
			}
			.info{width:100%; height:70rpx; padding:10rpx; padding-top:15rpx; float:left;
				.realname{width:auto; float:left; font-weight: bold; font-size:34rpx;}
				.sex{width:30rpx; height:30rpx; float:left; margin-left:10rpx; margin-top:5rpx; image{width:100%; height:100%;}}
				.age{width:auto; height:30rpx; float:right; font-size:28rpx; color:#757575;}
			}
			.pos{width:100%; height:40rpx; padding-left:10rpx; padding-right: 10rpx; float:left; display: flex; flex-direction: row; justify-content: space-between;
				.city{width:auto; height:40rpx; line-height: 40rpx; padding-left:8rpx; padding-right: 8rpx; border-radius: 6rpx; font-size:28rpx; background-color: #ff5732; color:#ffffff; }
				.distance{flex:1; min-width:175rpx; height:40rpx; line-height: 40rpx; font-size:26rpx; color:#757575; text-align: right;}
			}
		}
	}
</style>
